<template>
	<view class="content" :style="{background:'#F7F7F7;'}">
		<view class="ad-image margin-top30">
			<ad style="height: 100%;" :unit-id="luttery_config.wx_prizedraw_banner_adv_key"></ad>
		</view>
		<text class="font28 margin-bottom30 margin-top30" :style="{color:'#111111;'}">——  中奖者名单  ——</text>
		<block v-for="(item, index) in goods_list" :key='index'>
			<view class="public-view" :style="{background:'#FFFFFF;'}">
				<view class="No1-css">
					<view class="top-title margin-bottom30">
						<text :style="{color:'#111111;'}">奖品：{{item.name}}</text>
					</view>
					<view class="No-other-avatar">
						<block v-for="(itemU, indexU) in goodslistUser[index]" :key="indexU">
							<view class="item">
								<image :src="itemU.avatar" mode=""></image>
								<text class="prize-usernmae font28" :style="{color:'#111111;'}">{{itemU.nickname}}</text>
							</view>
						</block>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	var util = require('@/js/util.js')
	export default {
		data() {
			return {
				luttery_id:'',
				luttery_info:'',
				goods_list:[],
				drawResult:null,
				next_id:'',
				pre_id:'',
				goodslistUser:[],
				join_list:'',
				luttery_config:''
			};
		},
		onShow() {
			this.luttery_config = uni.getStorageSync("luttery_config")
		},
		onShareAppMessage() { // 分享 buttom share
			return {
				title: '抽奖助手',
				path: '/pages/index/index?parent_id='+uni.getStorageSync('member_id')+'&prizedraw_id='+this.luttery_id
			}
		},
		onLoad(e) {
			this.luttery_id = e.id
			console.log(this.luttery_id)
			this.getLutteryInfo()
		},
		methods:{
			getLutteryInfo(){
				let _self = this
				clearInterval(_self.lookVideo_interval)
				uni.request({
					url: util.getUrl("prizedraw/info"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						prizedraw_id:_self.luttery_id
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.luttery_info = res.data.data.info
							_self.goods_list = res.data.data.goods
							_self.join_list = res.data.data.join_list
							_self.drawResult = res.data.data.drawResult
							_self.next_id = res.data.data.next_id
							_self.pre_id = res.data.data.pre_id
							setTimeout(()=>{
								for(let key in _self.goods_list){
									_self.getJoinGiftList(key,_self.goods_list[key])
								}
							},300)
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
							if(res.data.code == 500){
								uni.navigateTo({
									url:'../../../pages/login/login'
								})
							}
						}
					},
				});
			},
			getJoinGiftList(key,item){
				let _self = this
				uni.request({
					url: util.getUrl("prizedraw/winnerList"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						prizedraw_id:_self.luttery_id,
						goods_id:item.id
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.goodslistUser.push(res.data.data)
							console.log(_self.goodslistUser)
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
							if(res.data.code == 500){
								uni.navigateTo({
									url:'../../../pages/login/login'
								})
							}
						}
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	.ad-image{
		width: 690upx;
		height: 190upx;
		margin-top: 30upx;
		margin-bottom: 38upx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.No1-css{
		display: flex;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
		padding-bottom: 30upx;
		.No-other-avatar{
			display: flex;
			width: 100%;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 20upx;
			.item{
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-bottom: 31upx;
				margin-left: 40upx;
				margin-right: 40upx;
				image{
					width: 80upx;
					height: 80upx;
					margin-bottom: 20upx;
					border-radius: 50%;
				}
				.prize-usernmae{
					width: 110upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
				}
			}
		}
		.user-info{
			display: flex;
			align-items: center;
			flex-direction: column;
			.No1-avatar{
				width: 80upx;
				height: 80upx;
				border-radius: 40upx;
				margin-bottom: 20upx;
			}
		}
		.top-title{
			width: 100%;
			display: flex;
			justify-content: center;
			box-sizing: border-box;
			padding: 25upx 0;
			border-bottom: 2upx solid #f7f7f7;
		}
	}
	.public-view{
		width: 690upx;
		border-radius: 12upx;
	}
	.content{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 750upx;
		min-height: 100vh;
	}
	.margin-bottom30{
		margin-bottom: 30upx;
	}
	.margin-top30{
		margin-top: 30upx;
	}
</style>
